<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上海地铁疫情防控运营组织分区图</title>
	
	    <link rel="stylesheet" type="text/css" href="./easyui/themes/default/easyui.css">
	    <link rel="stylesheet" type="text/css" href="./easyui/themes/icon.css">
	   
    <style type="text/css">
    	html,body {
      		margin:0;
			padding:0;
			width: 100%;
    		height: 100%;
	 		overflow: hidden;
	 		background-color: #606060;
   		}
   		svg{
   			height:180%; 
            width: 150%;
   		}
        #area_status{
            position: absolute; 
            display: block;
            color:yellow;
            font-size: 24px;
            background-color: black;
        }
        #station_status{
            position: absolute; 
            display: block;
            color:yellow;
            font-size: 14px;
            right:30px;
            margin-top: 20px;
            width: 25%;
            height: 120px;
            background-color: white;
        }
        #header{
            width: 100%;
            height: 50px;
            background: #303030;
            text-align: center;
        }
        #header a{
            color: yellow;
            font-size: 36px;
        }
        #sample{
            width: 200px;
            height: 140px;
            position: absolute;
            bottom: 0px;
            display: block;
            background: #262626;
            border: 1px solid #646f7b;
            border-radius: 5px;
            color:white;
        }

        #credit{
            width: auto;
            height: auto;
            position: absolute;
            bottom: 0px;
            right: 0px;
            display: block;
            font-size: smaller;
            color:white;
        }
	   
        /* tab样式 */
		#station_status .easyui-datagrid{
		   border:1px dotted transparent !important;	   
		}
		
		#station_status .panel-header, #station_status .panel-body{
		    border-color: #404040 !important;
		}
		#station_status .datagrid-header .datagrid-header-inner{
			background-color:#3F5B2D !important; 
		}
		#station_status .datagrid-header .datagrid-header-over{
			background-color:#3F5B2D !important;  
		}
		#station_status .datagrid-header,
		#station_status .datagrid-toolbar,
		#station_status .datagrid-pager,
		#station_status .datagrid-footer-inner{
			border-color:#3F5B2D !important;
		}
        #station_status .datagrid-header .datagrid-header-inner .datagrid-cell{
			color:#fff !important;
		}
		#station_status .datagrid-header-row td{
			border-right:1px dotted transparent;
			border-bottom:1px dotted transparent; 
		}	 
	   #station_status .datagrid-body td{
			border-right:1px dotted transparent;
			border-bottom:1px dotted transparent;
	    }
	   
	   
	  .datagrid-body::-webkit-scrollbar {
	     width: 18px;
	     height: 6px;
	     background-color: #909090 !important;
	   }
	   /*定义滚动条轨道 内阴影+圆角*/
	   .datagrid-body::-webkit-scrollbar-track {
	     box-shadow: inset 0 0 0px #202020 !important;
	     background-color: #202020 !important;
	   }
	    
	   /*定义滑块 内阴影+圆角*/
	   .datagrid-body::-webkit-scrollbar-thumb {
	     box-shadow: inset 0 0 0px #909090 !important;
	     background-color: #909090 !important;
	   } 
		
    </style>
</head>
<body>
    <div id="header"><a>上海地铁疫情防控运营组织分区图</a></div>
    <!--<embed src="/resources/line_updown_edit.svg" type="image/svg+xml" style="height: 1080px;width: 1920px;"/>-->
    <table id="area_status">
    </table>
	<div id="station_status">
		<table  id="station_status_table" style="width:100%;height:400px;text-align:center;" 
		data-options="singleSelect:true,collapsible:true">
		   <thead>
			 <tr>
				 <th id="region_column" data-options="field:'region_name',align:'center',resizable:false" width="20%">行政区</th>
				 <th id="line_column" data-options="field:'line',align:'center',resizable:false" width="10%">线路</th>
				 <th data-options="field:'station_name',align:'center',resizable:false" width="30%">车站</th>
				 <th data-options="field:'street_name',align:'center',resizable:false" width="20%">街道/镇</th>
				 <th data-options="field:'level3_percent',align:'center',resizable:false" width="20%">防范区比列</th>
			 </tr>
		  </thead>
		</table>
	</div>
    <div id="sample">
        <p style="margin-left: 5px;">图例：</p>
        <table style="margin-left: 5px;">
            <tr>
                <td><div style="width: 18px;height: 18px;background: red;"></div></td>
                <td>防范区占比≤50%</td>
            </tr>
            <tr>
                <td><div style="width: 18px;height: 18px;background: yellow;"></div></td>
                <td>防范区占比50%-75%</td>
            </tr>
            <tr>
                <td><div style="width: 18px;height: 18px;background: green;"></div></td>
                <td>防范区占比≥75%</td>
            </tr>
        </table>
    </div>
    <div id="credit">
        <p>*本系统数据来源于上海交通城运系统</p>
    </div>
	<div id="region_popper" style="width: 100px;display: none;">
        <select id="region_select" style="width: 90%">
            <option value="all">全部</option>
            <option value="pd">浦东</option>
            <option value="hp">黄浦</option>
            <option value="ja">静安</option>
            <option value="xh">徐汇</option>
            <option value="cn">长宁</option>
            <option value="pt">普陀</option>
            <option value="hk">虹口</option>
            <option value="yp">杨浦</option>
            <option value="bs">宝山</option>
            <option value="mh">闵行</option>
            <option value="jd">嘉定</option>
            <option value="sj">松江</option>
            <option value="qp">青浦</option>
            <option value="fx">奉贤</option>
            <option value="ss">江苏</option>
        </select>
    </div>
    <div id="line_popper" style="width: 30px;display: none;">
        <select id="line_select">
            <option value="all">全部</option>
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="浦江线">浦江线</option>
            <option value="磁浮线">磁浮线</option>
        </select>
    </div>
    <script src="./js/snap.svg.js"></script>
    <script src="./js/snap.svg.zpd.js"></script>
    <script type="text/javascript" src="./easyui/jquery.min.js"></script>
    <script type="text/javascript" src="./easyui/jquery.easyui.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/index.js?version=1"></script>
</body>
</html>